<template>
  <el-dialog
    v-model="cancelTaskDialog"
    :title="cancelTaskTitle"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item :label="cancelTaskTitle + '原因'" prop="cancelTaskRason">
        <el-input v-model="form.cancelTaskRason" />
      </el-form-item>
      <el-form-item label="上传证件" prop="cancelTaskPic">
        <el-upload
          :file-list="form.cancelTaskPic"
          :multiple="true"
          class="avatar-uploader"
          action="https://api.sanjianke.com/common/Upload/upload?file=OrderAttach&type=image"
          list-type="picture-card"
          accept="image/png, image/jpeg"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="cancelTaskOk">确 定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  <div>
    <div v-if="FlowState !== 4" style="padding-bottom: 10px">
      <el-button
        v-for="(item, index) in AssignOrderBtns"
        :key="index"
        type="primary"
        plain
        style="margin: 10px; margin-top: 5px"
        @click="doAssignOrder(item)"
      >
        {{ item.AssignOrderTargetName }}
      </el-button>
    </div>
    <div style="padding-bottom: 10px">
      <el-table
        v-loading="listLoading"
        :data="WorkTasks"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="ID"
          prop="WorkTaskID"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column align="center" label="分配人" width="80">
          <template #default="{ row }">{{ row.AssignStaffName }}</template>
        </el-table-column>
        <el-table-column align="center" label="分单目标" width="150">
          <template #default="{ row }">{{ row.TaskTargetName }}</template>
        </el-table-column>
        <el-table-column align="center" label="指派接单人" width="100">
          <template #default="{ row }">{{ row.TaskStaffName }}</template>
        </el-table-column>
        <el-table-column align="center" label="派单时间" show-overflow-tooltip>
          <template #default="{ row }">{{ row.AddTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="任务" width="120">
          <template #default="{ row }">{{ row.ProductName }}</template>
        </el-table-column>
        <el-table-column align="center" label="服务对象" width="150">
          <template #default="{ row }">{{ row.BindStoreAccount }}</template>
        </el-table-column>
        <el-table-column align="center" label="接单状态" width="100">
          <template #default="{ row }">
            <div v-if="row.AssignOrderSetID == 1 || row.AssignOrderSetID == 4">
              <el-text v-if="row.TaskState == 0" type="danger">待分单</el-text>
              <el-text v-if="row.TaskState == 1" type="success">已分单</el-text>
            </div>
            <div v-else>
              <el-text v-if="row.TaskState == 0" type="danger">待接单</el-text>
              <el-text v-if="row.TaskState == 1" type="success">已接单</el-text>
              <el-text v-if="row.TaskState == 2" type="warning">待审核</el-text>
              <el-text v-if="row.TaskState == 3" type="success">已审核</el-text>
              <el-text v-if="row.TaskState == -2" type="warning">
                已更换
              </el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="业绩审核状态" width="120">
          <template #default="{ row }">
            <el-text v-if="row.SubmitCheckState == -2" type="danger" />
            <el-text v-if="row.SubmitCheckState == -1" type="danger">
              有未审核
            </el-text>
            <el-text v-if="row.SubmitCheckState == 0" type="warning">
              待审核
            </el-text>
            <el-text v-if="row.SubmitCheckState == 1" type="success">
              已通过
            </el-text>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="130">
          <template #default="{ row }">
            <div v-if="row.flag" style="float: left">
              <el-button
                v-if="row.isList == 0"
                type="success"
                size="small"
                @click="doAssignTaskList(row)"
              >
                <span v-if="row.TaskState == 0">修改</span>
                <span v-else>查看</span>
              </el-button>
              <el-button
                v-else
                type="success"
                size="small"
                @click="doAssignTaskList(row)"
              >
                <span v-if="row.TaskState == 0">任务清单</span>
                <span v-else>查看/审核</span>
              </el-button>
              <el-button
                v-if="
                  row.TaskState == 0 && userInfo.StaffID == row.AssignStaffID
                "
                type="danger"
                size="small"
                @click="cancelTaskList(row, 0)"
              >
                取消分单
              </el-button>
              <el-button v-if="row.state == -1" type="info" size="small">
                已作废
              </el-button>
            </div>
            <div style="float: left">
              <el-button v-if="row.state == -1" type="info" size="small">
                已作废
              </el-button>
              <el-button
                v-if="
                  row.state != -1 &&
                  (actstaffpostid == 2 ||
                    actstaffpostid == 3 ||
                    actstaffpostid == 6 ||
                    actstaffpostid == 18)
                "
                type="danger"
                size="small"
                @click="cancelTaskList(row, -1)"
              >
                作废
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <assign-order ref="assignOrderRef" @fetch-data="TriggerUp" />
    <!-- <assign-operate ref="assignOperateRef" />
    <assign-designer ref="assignDesignerRef" />
    <assign-videoer ref="assignVideoerRef" />
    <assign-zonghe ref="assignZongheRef" /> -->
  </div>
</template>

<script>
  import { getAssignOrderBtns, cancelWorkTask } from '@/api/worktask'
  import AssignOrder from '@/views/business/components/AssignOrder'
  // import AssignOperate from '@/views/business/components/AssignOperate'
  // import AssignDesigner from '@/views/business/components/AssignDesigner'
  // import AssignVideoer from '@/views/business/components/AssignVideoer'
  // import AssignZonghe from '@/views/business/components/AssignZonghe'

  export default defineComponent({
    name: 'OrderAssign',
    components: {
      AssignOrder,
      // AssignOperate,
      // AssignDesigner,
      // AssignVideoer,
      // AssignZonghe,
    },
    props: {
      actstffpostid: {
        type: Number,
        default: 0,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        userInfo: {},
        actstaffpostid: 0,
        formRef: null,
        form: {
          cancelTaskPic: [],
        },
        flag: true,
        OrderInfo: {},
        OrderID: 0,
        listLoading: false,
        assignOrderRef: null,
        assignDesignerRef: null,
        assignVideoerRef: null,
        assignZongheRef: null,
        ProductList: [],
        StoreList: [],
        WorkTasks: [],
        AssignOrderBtns: [],
        FlowState: 0,
        SaleStaffInfo: {},
        loginUser: {},
        cancelTaskDialog: false,
        cancelTaskTitle: '',
        cancelTaskID: 0,
        cancelTaskType: 0,
      })

      const showList = (
        OrderInfo,
        ProductList,
        StoreList,
        WorkTasks,
        GiftList,
        FlowState,
        SaleStaffInfo
      ) => {
        state.GiftList = GiftList
        state.OrderInfo = OrderInfo
        state.OrderID = OrderInfo.OrderID
        state.FlowState = FlowState
        getAssignOrderBtn()
        state.ProductList = []
        state.ProductList = ProductList
        state.StoreList = StoreList
        state.WorkTasks = WorkTasks
        state.SaleStaffInfo = SaleStaffInfo
        state.loginUser = JSON.parse(localStorage.getItem('userInfo'))

        console.log(
          'FlowState',
          FlowState,
          state.SaleStaffInfo,
          state.loginUser
        )
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.cancelTaskDialog = false
      }
      const doAssignOrder = (item) => {
        state.assignOrderRef.showEdit(
          state.OrderID,
          item,
          state.ProductList,
          {},
          state.GiftList,
          state.SaleStaffInfo,
          { WorkTaskID: 0 }
        )
      }
      const cancelTaskList = async (row, t) => {
        if (t) {
          state.cancelTaskTitle = '作废'
        } else {
          state.cancelTaskTitle = '取消'
        }
        state.cancelTaskID = row.WorkTaskID
        state.cancelTaskType = t
        state.cancelTaskDialog = true
      }
      const cancelTaskOk = async () => {
        const { msg } = await cancelWorkTask({
          WorkTaskID: state.cancelTaskID,
          state: state.cancelTaskType,
          cancelTaskRason: state.form.cancelTaskRason,
          cancelTaskPic: state.form.cancelTaskPic,
        })
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        close()
        emit('fetch-data')
      }
      const doAssignTaskList = (row) => {
        // const item = state.AssignOrderBtns.find(
        //   (itm) => itm.AssignOrderSetID === row.AssignOrderSetID
        // )

        state.assignOrderRef.showEdit(
          state.OrderID,
          row.AssignOrderSet,
          state.ProductList,
          row,
          state.GiftList,
          state.SaleStaffInfo,
          { WorkTaskID: 0 }
        )
      }
      const getAssignOrderBtn = async () => {
        state.listLoading = true
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        state.userInfo = userInfo
        const actstaffpost = JSON.parse(userInfo.StaffPostID)
        const actstaffpostid = actstaffpost[0][1]
        state.actstaffpostid = actstaffpost[0][1]

        const flow = {
          OrderID: state.OrderID,
          OrderFlowState: state.FlowState,
          StaffPostID: actstaffpostid,
        }
        const {
          data: { AssignOrderBtns },
        } = await getAssignOrderBtns(flow)
        state.AssignOrderBtns = AssignOrderBtns

        const loginUser = JSON.parse(localStorage.getItem('userInfo'))
        console.log('loginUser.StaffID', loginUser)

        state.WorkTasks.forEach((row) => {
          if (loginUser.StaffID == row.AssignStaffID) {
            row.flag = true
          } else {
            row.flag = false
            row.flag = row.TaskChecker.includes(loginUser.StaffID)
          }
        })

        console.log('state.WorkTasks', state.WorkTasks)

        console.log(AssignOrderBtns, 'AssignOrderBtnsAssignOrderBtns')
        state.listLoading = false
      }
      // 触发上级
      const TriggerUp = () => {
        console.log('走这里 吗？')
        emit('fetch-data')
      }
      const handleRemove = (uploadFile, uploadFiles) => {
        console.log(uploadFile, uploadFiles)
        console.log(state.form, '12312312')
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.form.cancelTaskPic.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log(state.form.cancelTaskPic, '  state.cancelTaskPic')
      }

      const handlePictureCardPreview = (uploadFile) => {
        console.log(uploadFile, 'uploadFile')
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }
      return {
        ...toRefs(state),
        TriggerUp,
        showList,
        doAssignOrder,
        doAssignTaskList,
        cancelTaskList,
        cancelTaskOk,
        close,
        handleRemove,
        handleAvatarSuccess,
        handlePictureCardPreview,
      }
    },
  })
</script>
